<template>
  <div id="app">
    <navbar :site="site"></navbar>
    <div>
      <router-view />
      <!-- <div
        class="backtop pointer"
        :class="{ visible: scrollPosition > 800 }"
        @click="backtop"
      >
        <div class="icon">
          <i class="el-icon-arrow-up"></i>
        </div>
        TOP
      </div> -->
      <footerView :site="site"></footerView>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import navbar from "@/components/navbar.vue";
import footerView from "@/components/footerView.vue";
export default {
  components: { navbar, footerView },
  data() {
    return {
      scrollPosition: "",
      site: {},
      authKey: "",
    };
  },
  created() {
    window.addEventListener("scroll", this.handleScroll);
    // 禁用右键菜单
    // document.addEventListener("contextmenu", function (e) {
    //   if (e.target.className === "work") {
    //     e.preventDefault();
    //   }
    // });

    // // 禁止拖放图片
    // document.addEventListener("dragstart", function (e) {
    //   if (e.target.tagName === "IMG") {
    //     e.preventDefault();
    //   }
    // });
  },
  watch: {
    $route(to, from) {
      // to 是新的路由对象，from 是旧的
      this.handleRouteParams();
    },
  },
  methods: {
    handleScroll() {
      this.scrollPosition = window.scrollY;
    },
    backtop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleRouteParams() {
      // 每次都从最新的 $route.query 中获取参数
      const newAuthKey = this.$route.query.auth_key;

      if (newAuthKey) {
        console.log("获取到新的 auth_key:", newAuthKey);
        this.authKey = newAuthKey;
        localStorage.setItem("auth_key", newAuthKey);
      } else {
        console.log("URL 中没有 auth_key 参数");
        // 可以在这里执行其他逻辑，比如跳转到授权页
        if (this.isWechatBrowser()) this.goAuthorize();
      }
    },
    isWechatBrowser() {
      if (typeof navigator === "undefined") return false;
      // 检测 User-Agent 中是否包含 MicroMessenger
      return /MicroMessenger/i.test(navigator.userAgent);
    },
    goAuthorize() {
      //跳转到微信授权
      location.href = "https://ban.suisnap.cn/authorize";
    },
  },
};
</script>
<style lang="scss" scope>
body,
html {
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 20px;
}
img {
  pointer-events: none; /* 禁用鼠标事件 */
  user-select: none; /* 禁止选择文本和图片 */
  -webkit-user-drag: none; /* 禁止拖动图片 */
  -webkit-touch-callout: none; /* iOS Safari */
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
.backtop {
  color: #6b532e;
  font-size: 16px;
  position: fixed;
  right: 50px;
  bottom: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 100;
  .icon {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #6b532e;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &.visible {
    opacity: 1;
    visibility: visible;
  }
}
.container {
  padding-top: 90px;
}
.swiper-slide {
  text-align: center;
}
ul li {
  list-style: none;
}
img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.imgDiv {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    height: 100%;
    transition: all 0.3s;
    display: block;
  }
  img:hover {
    transform: scale(1.05);
  }
}
.pointer {
  cursor: pointer;
}
.el-image {
  width: 100%;
  height: 100%;
}
.swiper-container {
  height: 100%;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1200px) {
  .wrap {
    padding: 0 30px;
  }
}
@media screen and (max-width: 1024px) {
  .backtop {
    right: 23px;
  }
  body,
  html {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .container {
    padding-top: 60px;
    .banner {
      height: 150px !important;
    }
  }
  .wrap {
    padding: 0 20px;
  }
  body {
    font-size: 14px;
  }
}
</style>
